<template>
  <div v-if="data.length != 0">
    <a-skeleton active :loading="true" />
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      :customRow="onClickRow"
      bordered
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
    </a-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
const columns = [
  {
    title: "实习小组",
    dataIndex: "name",
  },
  {
    title: "人数",
    dataIndex: "NumPeople",
  },
  {
    title: "指导老师",
    dataIndex: "teacherName",
  },
  {
    title: "联系电话",
    dataIndex: "teacherPhone",
  },
];
import Api from "@/request/api";
export default {
  data() {
    return {
      data: [], //表格的数据
      columns, //标头的配置
    };
  },
  methods: {
    ...mapMutations("InternshipApply", ["setSXGroupSelectKey"]),
    //点击行
    onClickRow(SelecrRow) {
      return {
        on: {
          click: () => {
            this.setSXGroupSelectKey({
              key: [SelecrRow.key],
              Name: SelecrRow.name,
              TeacherName: SelecrRow.teacherName,
              TeacherPhone: SelecrRow.teacherPhone,
            });
          },
        },
      };
    },
    GetData() {
      Api.GetGroups({ id: this.SXDirectionSelectKey[0] })
        .then((res) => {
          this.data = res.data.result.map((item) => {
            return {
              key: item.id,
              name: item.name,
              NumPeople: "99/100",
              teacherName: item.teacherName,
              teacherPhone: "1760785415",
            };
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.GetData();
  },
  computed: {
    ...mapState("InternshipApply", [
      "SXGroupSelectKey",
      "SXDirectionSelectKey",
    ]),
    rowSelection() {
      return {
        type: "radio", //单选
        selectedRowKeys: this.SXGroupSelectKey, //默认的选中项
        //点击前面的单选按钮
        onChange: (selectedRowKeys) => {
          this.setSXGroupSelectKey(selectedRowKeys);
        },
      };
    },
    pagination() {
      return {
        pageSize: 8, //每页中显示数据
      };
    },
  },
};
</script>

<style lang="less" scope>
</style>